<template>
  <div>
    <!-- 标题 -->
    <div class="position">
      <span class="iconfont">&#xe7f1;</span>
      <span class="title">北京理工大学国防科技园2号楼10层</span>
      <span class="iconfont">&#xe601;</span>
    </div>
    <!-- 搜索框 -->
    <div class="search">
      <span class="iconfont">&#xe600;</span>
      山姆会员商店优惠商品
    </div>
    <!-- banner区域 -->
    <div class="banner">
      <img src="http://www.dell-lee.com/imgs/vue3/banner.jpg" alt="" />
    </div>
    <div class="icons">
      <div class="icons__item" 
      v-for="(item,index) in iconList"
      :key="index">
        <img :src="`http://www.dell-lee.com/imgs/vue3/${item.imgName}.png`" alt="" />
        <p>{{item.desc}}</p>
      </div>
    </div>
    <!-- gap区域 -->
    <div class="gap"></div>
  </div>
</template>

<script>
export default {
  name: "StaticPart",
  data() {
    return {
      iconList: [
        {
          imgName: "超市",
          desc: "超市",
        },
        {
          imgName: "鲜花",
          desc: "鲜花",
        },
        {
          imgName: "超市",
          desc: "超市",
        },
        {
          imgName: "超市",
          desc: "超市",
        },
        {
          imgName: "超市",
          desc: "超市",
        },
        {
          imgName: "超市",
          desc: "超市",
        },
        {
          imgName: "超市",
          desc: "超市",
        },
        {
          imgName: "超市",
          desc: "超市",
        },
        {
          imgName: "超市",
          desc: "超市",
        },
        {
          imgName: "超市",
          desc: "超市",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
//引入多出省略
@import "../../../style/mixins.scss";

.position {
  padding: 0.16rem 0;
  line-height: 0.22rem;
  font-size: 0.16rem;
  @include ellipsis;
  .iconfont {
    font-size: 0.16rem;
    padding: 0 0.085rem 0 0.1rem;
  }
}
//搜索框样式
.search {
  width: 3.39rem;
  height: 0.32rem;
  background: #f5f5f5;
  border-radius: 0.16rem;
  color: #b7b7b7;
  //padding-left: .1rem;
  font-size: 0.14rem;
  line-height: 0.32rem;
  .iconfont {
    font-size: 0.16rem;
    margin-right: 0.1rem;
    margin-left: 0.1rem;
  }
}
//banner样式
.banner {
  margin-top: 0.12rem;
  width: 3.39rem;
  height: 0.86rem;
  //background-color: black;
  img {
    width: 100%;
  }
}
//十全十美样式
.icons {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0.16rem;
  &__item {
    width: 20%;
    text-align: center;
    img {
      height: 0.4rem;
      width: 0.4rem;
    }
    p {
      margin: 0.06rem 0 0.16rem 0;
    }
  }
}
//gap
.gap {
  height: 0.1rem;
  background-color: #f1f1f1;
  margin: 0 -0.18rem;
}
</style>
